<template>
  <div>
    <div class="flex-center mb16">
      <Title title="价格信息"/>
    </div>
    <el-form
      ref="accountForm"
      :model="paramsObj"
      :label-position="showMobilePage?'left':'right'"
      class="lineHeight32"
      label-width="110px">
      <el-row class="response-el-row" type="flex">
        <el-col v-for="item in dataList" :span="span" :key="item.parentKey + item.keyword" :class="span === 12 ? 'responsive-col-lg-12' : 'responsive-col-lg-8'" class="mb22">
          <el-form-item :label="item.name" :class="{ 'indentation-form-item': item.createIndentLabel }">
            <el-input
              v-if="item.parentKey"
              v-model="paramsObj[item.parentKey][item.keyword]"
              :maxlength="12"
              class="width240"
              placeholder="请输入"
              size="small"
              oninput="if(value>999999999)value=999999999;"
              @input="numInputChange($event, item.keyword, item.parentKey)" />
            <el-input
              v-else
              v-model="paramsObj[item.keyword]"
              :maxlength="12"
              class="width240"
              placeholder="请输入"
              size="small"
              oninput="if(value>999999999)value=999999999;"
              @input="numInputChange($event, item.keyword)" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { getFields } from '../data';
import { mapState } from 'vuex';

export default {
  components: { Title },
  model: {
    prop: 'paramsObj',
    event: 'change'
  },
  props: {
    paramsObj: {
      type: Object,
      default() {
        return {};
      }
    },
    id: {
      type: Number | String,
      default: 0
    },
    platform: {
      type: Number | String,
      default: null
    },
    platformOption: {
      type: Array,
      default: () => []
    },
    platformName: {
      type: String,
      default: ''
    },
    span: {
      type: Number,
      default: 8
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    dataList() {
      const platformName = this.platformName || (this.platform ? this.platformOption.find(it => it.id === this.platform).value : '其他');
      return getFields(platformName);
    }
  },
  methods: {
    numInputChange(text, prop, parentKey) {
      let str;
      str = text.replace(/[^\d.]/g, '');
      str = str.replace(/^0+(\d)/, '$1'); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      str = str.replace(/\./g, ''); // 数量只允许输入0和正整数
      str = str === '' ? null : str;
      if (parentKey) {
        this.paramsObj[parentKey][prop] = Number(str);
      } else {
        this.paramsObj[prop] = Number(str);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.mb16 {
  margin-bottom: 16px;
}
.mb22 {
  ::v-deep {
    .el-form-item {
      margin-bottom: 22px;
    }
  }
}
::v-deep {
  .el-cascader {
    line-height: 32px;
  }
  .el-radio__label {
    padding-left: 4px;
  }
}
.width240 {
  width: 240px;
  &::v-deep{
    .el-tag.el-tag--info {
      color: #406eff;
      background: #eff3fb;
      display: flex;
      align-items: center;
      .el-tag__close {
        right: 0;
        margin: 0 0 0 3px;
      }
    }
  }
}
</style>
